<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建可信空间</title>
    <!-- 引入Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .modal-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }
        .modal-title {
            color: #212529;
            font-weight: 600;
        }
        .form-label {
            font-weight: 500;
        }
        .participants-container {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin-top: 5px;
        }
        .modal-footer {
            border-top: 1px solid #dee2e6;
        }
    </style>
</head>
<body>
<!-- 新增空间对话框 -->
<div class="modal fade" id="addSpaceModal" tabindex="-1" aria-labelledby="addSpaceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- 对话框头部 -->
            <div class="modal-header">
                <h5 class="modal-title" id="addSpaceModalLabel">创建可信空间</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- 对话框主体 -->
            <div class="modal-body">
                <form id="spaceForm">
                    <!-- 名称输入框 -->
                    <div class="mb-3">
                        <label class="form-label">空间名称</label>
                        <input type="text" class="form-control" name="name"
                               placeholder="请输入创建空间的名称..." required>
                    </div>
                    <!-- 多选区域 - 参与方 -->
                    <div class="mb-3">
                        <label class="form-label">参与方选择</label>
                        <div class="participants-container" id="participantsContainer">
                            <!-- 参与方选项将通过JavaScript动态加载 -->
                            <div class="d-flex justify-content-center">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">加载中...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 目的输入框 -->
                    <div class="mb-3">
                        <label class="form-label">创建目的</label>
                        <input type="text" class="form-control" name="purpose"
                               placeholder="请输入创建空间的主要目的..." required>
                    </div>
                    <!-- 存储空间大小输入框 -->
                    <div class="mb-3">
                        <label class="form-label">存储空间大小(GB)</label>
                        <input type="number" class="form-control" name="quota"
                               min="1" max="1000" value="10" required>
                        <div class="form-text">请输入1-1000之间的数字</div>
                    </div>
                    <!-- 有效期 -->
                    <div class="mb-3">
                        <label class="form-label">有效期(天)</label>
                        <input type="number" class="form-control" name="duration"
                               min="1" max="1000" value="10" required>
                        <div class="form-text">请输入1-365之间的数字</div>
                    </div>
                </form>
            </div>

            <!-- 对话框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmAdd">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 引入Bootstrap和jQuery -->
<script th:src="@{//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $(function() {
        // 当模态框显示时加载参与方数据
        loadParticipants();

        // 确定按钮点击处理
        $('#confirmAdd').click(function() {
            saveSpaceData();
        });

        // 加载参与方数据
        function loadParticipants() {
            $.ajax({
                url: '/res/parts',
                type: 'GET',
                success: function(participants) {
                    renderParticipants(participants);
                },
                error: function() {
                    $('#participantsContainer').html(`
                        <div class="alert alert-danger">
                            加载参与方失败，请<a href="javascript:location.reload()">重试</a>
                        </div>
                    `);
                }
            });
        }

        // 渲染参与方选项
        function renderParticipants(participants) {
            let html = '';
            participants.forEach(participant => {
                html += `
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox"
                               value="${participant}" id="participant-${participant}">
                        <label class="form-check-label" for="participant-${participant}">
                            ${participant}
                        </label>
                    </div>
                `;
            });
            $('#participantsContainer').html(html);
        }

        // 保存空间数据
        function saveSpaceData() {
            const name = $('input[name="name"]').val();
            const purpose = $('input[name="purpose"]').val();
            const quota = parseInt($('input[name="quota"]').val());
            const duration = parseInt($('input[name="duration"]').val());
            const selectedParticipants = [];

            $('#participantsContainer input:checked').each(function() {
                selectedParticipants.push($(this).val());
            });

            // 表单验证
            if (!name) {
                alert('请填写空间名称');
                return;
            }

            // 表单验证
            if (!purpose) {
                alert('请填写空间目的');
                return;
            }

            if (isNaN(quota) || quota < 1 || quota > 1000) {
                alert('请填写有效的存储空间大小 (1-1000 GB)');
                return;
            }

            if (isNaN(duration) || duration < 1 || duration > 365) {
                alert('请填写有效的有效期 (1-365 天)');
                return;
            }

            if (selectedParticipants.length === 0) {
                alert('请至少选择一个参与方');
                return;
            }

            // 提交数据到后端
            $.ajax({
                url: '/ts/create',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    name: name,
                    purpose: purpose,
                    quota: quota,
                    duration: duration,
                    participants: selectedParticipants
                }),
                success: function(response) {
                    if (response && response.code == 200) {
                        // 关闭当前模态框
                        if (window.parent.closeModal) {
                          window.parent.closeModal();
                        }
                    } else {
                        alert('保存失败: ' + response.msg);
                    }
                },
                error: function() {
                    alert('请求失败，请重试');
                }
            });
        }
    });
</script>
</body>
</html>